<template>
  <div class="index-container">
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label" style="color: #409eff">
          <i class="el-icon-date"></i>
          周工单汇总表（遗留工单+本周完成的工单）
        </span>
        <el-row :gutter="20">
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-alert :closable="false">
              <div style="display: flex; align-items: center; justify-content: center">
                <el-date-picker
                  :picker-options="{ firstDayOfWeek: 1 }"
                  v-model="currentWeek"
                  type="week"
                  format="yyyy 第 WW 周"
                  value-format="yyyy-MM-dd"
                  placeholder="选择周"
                  @change="handleChange"
                  :clearable="false"
                />
                <el-button type="success" style="margin-left: 10px" @click="onTableExcels">导出</el-button>
              </div>
            </el-alert>
          </el-col>
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24" style="padding-left: 20px">
            <el-collapse v-model="activeName" accordion>
              <el-collapse-item name="1">
                <template slot="title">
                  <span style="font-weight: 600">一部</span>
                </template>
                <el-table
                  :data="tableAllData[1]"
                  stripe
                  style="width: 100%"
                  :header-cell-style="{ 'text-align': 'center' }"
                  :cell-style="{ 'text-align': 'center' }"
                  border
                >
                  <el-table-column label="费用号" prop="costNumber" show-overflow-tooltip />
                  <el-table-column label="项目名称" prop="projectName" show-overflow-tooltip />
                  <el-table-column label="工单内容" prop="workContent" show-overflow-tooltip min-width="220" />
                  <el-table-column label="工单下达时间" prop="workOrderIssuanceTime" show-overflow-tooltip min-width="80" />
                  <el-table-column label="执行人" prop="executUserName" min-width="80" />
                  <el-table-column label="完成情况" prop="completionStatus" min-width="80">
                    <template #default="{ row }">
                      <el-tag type="success" effect="dark" v-if="row.completionStatus == '已完成'">已完成</el-tag>
                      <el-tag type="info" effect="dark" v-else-if="row.completionStatus == '取消'">取消</el-tag>
                      <el-tag type="" effect="dark" v-else>未完成</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="工单等级" prop="levelName" sortable min-width="80" />
                  <el-table-column label="未关闭原因" prop="notClosingReason" show-overflow-tooltip min-width="120" />
                </el-table>
              </el-collapse-item>
              <el-collapse-item name="2">
                <template slot="title">
                  <span style="font-weight: 600">二部</span>
                </template>
                <el-table
                  :data="tableAllData[2]"
                  stripe
                  style="width: 100%"
                  :header-cell-style="{ 'text-align': 'center' }"
                  :cell-style="{ 'text-align': 'center' }"
                  border
                >
                  <el-table-column label="费用号" prop="costNumber" show-overflow-tooltip />
                  <el-table-column label="项目名称" prop="projectName" show-overflow-tooltip />
                  <el-table-column label="工单内容" prop="workContent" show-overflow-tooltip min-width="220" />
                  <el-table-column label="工单下达时间" prop="workOrderIssuanceTime" show-overflow-tooltip min-width="80" />
                  <el-table-column label="执行人" prop="executUserName" min-width="80" />
                  <el-table-column label="完成情况" prop="completionStatus" min-width="80">
                    <template #default="{ row }">
                      <el-tag type="success" effect="dark" v-if="row.completionStatus == '已完成'">已完成</el-tag>
                      <el-tag type="info" effect="dark" v-else-if="row.completionStatus == '取消'">取消</el-tag>
                      <el-tag type="" effect="dark" v-else>未完成</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="工单等级" prop="levelName" sortable min-width="80" />
                  <el-table-column label="未关闭原因" prop="notClosingReason" show-overflow-tooltip min-width="120" />
                </el-table>
              </el-collapse-item>
              <el-collapse-item name="3">
                <template slot="title">
                  <span style="font-weight: 600">三部</span>
                </template>

                <el-table
                  :data="tableAllData[3]"
                  stripe
                  style="width: 100%"
                  :header-cell-style="{ 'text-align': 'center' }"
                  :cell-style="{ 'text-align': 'center' }"
                  border
                >
                  <el-table-column label="费用号" prop="costNumber" show-overflow-tooltip />
                  <el-table-column label="项目名称" prop="projectName" show-overflow-tooltip />
                  <el-table-column label="工单内容" prop="workContent" show-overflow-tooltip min-width="220" />
                  <el-table-column label="工单下达时间" prop="workOrderIssuanceTime" show-overflow-tooltip min-width="80" />
                  <el-table-column label="执行人" prop="executUserName" min-width="80" />
                  <el-table-column label="完成情况" prop="completionStatus" min-width="80">
                    <template #default="{ row }">
                      <el-tag type="success" effect="dark" v-if="row.completionStatus == '已完成'">已完成</el-tag>
                      <el-tag type="info" effect="dark" v-else-if="row.completionStatus == '取消'">取消</el-tag>
                      <el-tag type="" effect="dark" v-else>未完成</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="工单等级" prop="levelName" sortable min-width="80" />
                  <el-table-column label="未关闭原因" prop="notClosingReason" show-overflow-tooltip min-width="120" />
                </el-table>
              </el-collapse-item>
              <el-collapse-item name="4">
                <template slot="title">
                  <span style="font-weight: 600">下位机</span>
                </template>
                <el-table
                  :data="tableAllData[4]"
                  stripe
                  style="width: 100%"
                  :header-cell-style="{ 'text-align': 'center' }"
                  :cell-style="{ 'text-align': 'center' }"
                  border
                >
                  <el-table-column label="费用号" prop="costNumber" show-overflow-tooltip />
                  <el-table-column label="项目名称" prop="projectName" show-overflow-tooltip />
                  <el-table-column label="工单内容" prop="workContent" show-overflow-tooltip min-width="220" />
                  <el-table-column label="工单下达时间" prop="workOrderIssuanceTime" show-overflow-tooltip min-width="80" />
                  <el-table-column label="执行人" prop="executUserName" min-width="80" />
                  <el-table-column label="完成情况" prop="completionStatus" min-width="80">
                    <template #default="{ row }">
                      <el-tag type="success" effect="dark" v-if="row.completionStatus == '已完成'">已完成</el-tag>
                      <el-tag type="info" effect="dark" v-else-if="row.completionStatus == '取消'">取消</el-tag>
                      <el-tag type="" effect="dark" v-else>未完成</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="工单等级" prop="levelName" sortable min-width="80" />
                  <el-table-column label="未关闭原因" prop="notClosingReason" show-overflow-tooltip min-width="120" />
                </el-table>
              </el-collapse-item>
              <el-collapse-item name="5">
                <template slot="title">
                  <span style="font-weight: 600">公共创新</span>
                </template>
                <el-table
                  :data="tableAllData[5]"
                  stripe
                  style="width: 100%"
                  :header-cell-style="{ 'text-align': 'center' }"
                  :cell-style="{ 'text-align': 'center' }"
                  border
                >
                  <el-table-column label="费用号" prop="costNumber" show-overflow-tooltip />
                  <el-table-column label="项目名称" prop="projectName" show-overflow-tooltip />
                  <el-table-column label="工单内容" prop="workContent" show-overflow-tooltip min-width="220" />
                  <el-table-column label="工单下达时间" prop="workOrderIssuanceTime" show-overflow-tooltip min-width="80" />
                  <el-table-column label="执行人" prop="executUserName" min-width="80" />
                  <el-table-column label="完成情况" prop="completionStatus" min-width="80">
                    <template #default="{ row }">
                      <el-tag type="success" effect="dark" v-if="row.completionStatus == '已完成'">已完成</el-tag>
                      <el-tag type="info" effect="dark" v-else-if="row.completionStatus == '取消'">取消</el-tag>
                      <el-tag type="" effect="dark" v-else>未完成</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="工单等级" prop="levelName" sortable min-width="80" />
                  <el-table-column label="未关闭原因" prop="notClosingReason" show-overflow-tooltip min-width="120" />
                </el-table>
              </el-collapse-item>
            </el-collapse>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label" style="color: #4ecb73">
          <i class="el-icon-document"></i>
          个人任务完成率报表
        </span>
        <el-row :gutter="20">
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-alert :closable="false">
              <div style="display: flex; align-items: center; justify-content: center">
                <el-date-picker
                  :picker-options="{ firstDayOfWeek: 1 }"
                  v-model="currentWeek"
                  type="week"
                  format="yyyy 第 WW 周"
                  value-format="yyyy-MM-dd"
                  placeholder="选择周"
                  @change="handleChange"
                  :clearable="false"
                />
                <el-button type="success" style="margin-left: 10px" @click="onExcels">导出</el-button>
              </div>
            </el-alert>
          </el-col>
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-card shadow="never">
              <div slot="header">
                <span style="font-weight: 600">一部</span>
              </div>

              <el-table
                :data="reporterPersonalPercentData[1]"
                stripe
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
                border
              >
                <!-- <el-table-column label="序号" show-overflow-tooltip width="95">
                  <template #default="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column> -->
                <el-table-column prop="realname" label="姓名" min-width="50"></el-table-column>
                <el-table-column prop="orderLost" label="遗留工单数" min-width="60"></el-table-column>
                <el-table-column prop="orderNew" label="新工单数" min-width="60"></el-table-column>
                <el-table-column prop="orderAll" label="工单总数" min-width="60"></el-table-column>
                <el-table-column prop="orderLostFinish" label="遗留工单完成数"></el-table-column>
                <el-table-column prop="orderNewFinish" label="新工单完成数"></el-table-column>
                <el-table-column prop="orderAllFinish" label="总完成数"></el-table-column>
                <el-table-column prop="orderCostomer" label="本周客户需求数"></el-table-column>
                <el-table-column prop="lost_rate" label="遗留工单完成率">
                  <template slot-scope="{ row }">
                    {{ row.lost_rate || '0.00%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="new_rate" label="新工单完成率">
                  <template slot-scope="{ row }">
                    {{ row.new_rate || '0.00%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="all_rate" label="总完成率">
                  <template slot-scope="{ row }">
                    {{ row.all_rate || '0.00%' }}
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-card shadow="never">
              <div slot="header" style="display: flex">
                <span style="font-weight: 600; flex: 1">二部</span>
              </div>
              <el-table
                :data="reporterPersonalPercentData[2]"
                stripe
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
                border
              >
                <!-- <el-table-column label="序号" show-overflow-tooltip width="95">
                  <template #default="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column> -->
                <el-table-column prop="realname" label="姓名" min-width="50"></el-table-column>
                <el-table-column prop="orderLost" label="遗留工单数" min-width="60"></el-table-column>
                <el-table-column prop="orderNew" label="新工单数" min-width="60"></el-table-column>
                <el-table-column prop="orderAll" label="工单总数" min-width="60"></el-table-column>
                <el-table-column prop="orderLostFinish" label="遗留工单完成数"></el-table-column>
                <el-table-column prop="orderNewFinish" label="新工单完成数"></el-table-column>
                <el-table-column prop="orderAllFinish" label="总完成数"></el-table-column>
                <el-table-column prop="orderCostomer" label="本周客户需求数"></el-table-column>
                <el-table-column prop="lost_rate" label="遗留工单完成率">
                  <template slot-scope="{ row }">
                    {{ row.lost_rate || '0.00%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="new_rate" label="新工单完成率">
                  <template slot-scope="{ row }">
                    {{ row.new_rate || '0.00%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="all_rate" label="总完成率">
                  <template slot-scope="{ row }">
                    {{ row.all_rate || '0.00%' }}
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-card shadow="never">
              <div slot="header" style="display: flex">
                <span style="font-weight: 600; flex: 1">三部</span>
              </div>
              <el-table
                :data="reporterPersonalPercentData[3]"
                stripe
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
                border
              >
                <!-- <el-table-column label="序号" show-overflow-tooltip width="95">
                  <template #default="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column> -->
                <el-table-column prop="realname" label="姓名" min-width="50"></el-table-column>
                <el-table-column prop="orderLost" label="遗留工单数" min-width="60"></el-table-column>
                <el-table-column prop="orderNew" label="新工单数" min-width="60"></el-table-column>
                <el-table-column prop="orderAll" label="工单总数" min-width="60"></el-table-column>
                <el-table-column prop="orderLostFinish" label="遗留工单完成数"></el-table-column>
                <el-table-column prop="orderNewFinish" label="新工单完成数"></el-table-column>
                <el-table-column prop="orderAllFinish" label="总完成数"></el-table-column>
                <el-table-column prop="orderCostomer" label="本周客户需求数"></el-table-column>
                <el-table-column prop="lost_rate" label="遗留工单完成率">
                  <template slot-scope="{ row }">
                    {{ row.lost_rate || '0.00%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="new_rate" label="新工单完成率">
                  <template slot-scope="{ row }">
                    {{ row.new_rate || '0.00%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="all_rate" label="总完成率">
                  <template slot-scope="{ row }">
                    {{ row.all_rate || '0.00%' }}
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-card shadow="never">
              <div slot="header" style="display: flex">
                <span style="font-weight: 600; flex: 1">下位机</span>
              </div>
              <el-table
                :data="reporterPersonalPercentData[4]"
                stripe
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
                border
              >
                <!-- <el-table-column label="序号" show-overflow-tooltip width="95">
                  <template #default="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column> -->
                <el-table-column prop="realname" label="姓名" min-width="50"></el-table-column>
                <el-table-column prop="orderLost" label="遗留工单数" min-width="60"></el-table-column>
                <el-table-column prop="orderNew" label="新工单数" min-width="60"></el-table-column>
                <el-table-column prop="orderAll" label="工单总数" min-width="60"></el-table-column>
                <el-table-column prop="orderLostFinish" label="遗留工单完成数"></el-table-column>
                <el-table-column prop="orderNewFinish" label="新工单完成数"></el-table-column>
                <el-table-column prop="orderAllFinish" label="总完成数"></el-table-column>
                <el-table-column prop="orderCostomer" label="本周客户需求数"></el-table-column>
                <el-table-column prop="lost_rate" label="遗留工单完成率">
                  <template slot-scope="{ row }">
                    {{ row.lost_rate || '0.00%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="new_rate" label="新工单完成率">
                  <template slot-scope="{ row }">
                    {{ row.new_rate || '0.00%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="all_rate" label="总完成率">
                  <template slot-scope="{ row }">
                    {{ row.all_rate || '0.00%' }}
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-card shadow="never">
              <div slot="header" style="display: flex">
                <span style="font-weight: 600; flex: 1">公共创新</span>
              </div>
              <el-table
                :data="reporterPersonalPercentData[5]"
                stripe
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
                border
              >
                <!-- <el-table-column label="序号" show-overflow-tooltip width="95">
                  <template #default="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column> -->
                <el-table-column prop="realname" label="姓名" min-width="50"></el-table-column>
                <el-table-column prop="orderLost" label="遗留工单数" min-width="60"></el-table-column>
                <el-table-column prop="orderNew" label="新工单数" min-width="60"></el-table-column>
                <el-table-column prop="orderAll" label="工单总数" min-width="60"></el-table-column>
                <el-table-column prop="orderLostFinish" label="遗留工单完成数"></el-table-column>
                <el-table-column prop="orderNewFinish" label="新工单完成数"></el-table-column>
                <el-table-column prop="orderAllFinish" label="总完成数"></el-table-column>
                <el-table-column prop="orderCostomer" label="本周客户需求数"></el-table-column>
                <el-table-column prop="lost_rate" label="遗留工单完成率">
                  <template slot-scope="{ row }">
                    {{ row.lost_rate || '0.00%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="new_rate" label="新工单完成率">
                  <template slot-scope="{ row }">
                    {{ row.new_rate || '0.00%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="all_rate" label="总完成率">
                  <template slot-scope="{ row }">
                    {{ row.all_rate || '0.00%' }}
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
            <el-card shadow="never">
              <div slot="header" style="display: flex">
                <span style="font-weight: 600; flex: 1">软件组</span>
              </div>
              <el-table
                :data="reporterPersonalPercentData['all']"
                stripe
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
                border
              >
                <!-- <el-table-column label="序号" show-overflow-tooltip width="95">
                  <template #default="scope">
                    {{ scope.$index + 1 }}
                  </template>
                </el-table-column> -->
                <el-table-column prop="realname" label="-" min-width="50"></el-table-column>
                <el-table-column prop="orderLost" label="遗留工单数" min-width="60"></el-table-column>
                <el-table-column prop="orderNew" label="新工单数" min-width="60"></el-table-column>
                <el-table-column prop="orderAll" label="工单总数" min-width="60"></el-table-column>
                <el-table-column prop="orderLostFinish" label="遗留工单完成数"></el-table-column>
                <el-table-column prop="orderNewFinish" label="新工单完成数"></el-table-column>
                <el-table-column prop="orderAllFinish" label="总完成数"></el-table-column>
                <el-table-column prop="orderCostomer" label="本周客户需求数"></el-table-column>
                <el-table-column prop="lost_rate" label="遗留工单完成率">
                  <template slot-scope="{ row }">
                    {{ row.lost_rate || '0.00%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="new_rate" label="新工单完成率">
                  <template slot-scope="{ row }">
                    {{ row.new_rate || '0.00%' }}
                  </template>
                </el-table-column>
                <el-table-column prop="all_rate" label="总完成率">
                  <template slot-scope="{ row }">
                    {{ row.all_rate || '0.00%' }}
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label" style="color: #ffc069">
          <i class="el-icon-date"></i>
          月度考核统计表
        </span>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          <i class="el-icon-date"></i>
          开发中的报表
        </span>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { getReporterPersonalPercent, getfetchTableAllData } from '@/api/wordOrder'
  const ExcelJS = require('exceljs')
  import FileSaver from 'file-saver'
  const Excel = require('exceljs')
  export default {
    name: 'reportforms',
    data() {
      return {
        activeName: '1',
        currentWeek: '',
        startDate: '',
        endDate: '',
        tableAllData: [],
        reporterPersonalPercentData: [],
      }
    },
    created() {
      const { getMondayAndSundayOfCurrentWeek } = require('@/utils/index')
      const { monday, sunday } = getMondayAndSundayOfCurrentWeek()
      this.currentWeek = monday
      this.startDate = monday
      this.endDate = sunday
      this.init()
    },
    beforeDestroy() {},
    methods: {
      init() {
        this.fetchReporterPersonalPercent()
        this.fetchTableAllData()
      },
      getNewDay(dateTemp, days) {
        var dateTemp = dateTemp.split('-')
        var nDate = new Date(dateTemp[1] + '-' + dateTemp[2] + '-' + dateTemp[0]) //转换为MM-DD-YYYY格式
        var millSeconds = Math.abs(nDate) + days * 24 * 60 * 60 * 1000
        var rDate = new Date(millSeconds)
        var year = rDate.getFullYear()
        var month = rDate.getMonth() + 1
        if (month < 10) month = '0' + month
        var date = rDate.getDate()
        if (date < 10) date = '0' + date
        return year + '-' + month + '-' + date
      },
      handleChange(e) {
        let d = new Date(e)
        d.setDate(d.getDate() - 1)
        let year = d.getFullYear()
        let month = (d.getMonth() + 1).toString().padStart(2, '0')
        let date = d.getDate().toString().padStart(2, '0')
        this.currentWeek = year + '-' + month + '-' + date
        this.startDate = this.currentWeek
        this.endDate = this.getNewDay(this.currentWeek, 6)
        this.init()
      },
      async fetchTableAllData() {
        const res = await getfetchTableAllData({
          startDate: this.startDate,
          endDate: this.endDate,
        })
        this.tableAllData = this.groupBy(res.data, 'departmentId')
        console.log(8989, this.tableAllData)
      },
      async fetchReporterPersonalPercent() {
        const res = await getReporterPersonalPercent({
          startDate: this.startDate,
          endDate: this.endDate,
        })
        this.reporterPersonalPercentData = this.groupBy(res.data, 'department_id')
        this.reporterPersonalPercentData[1].push(...this.reporterPersonalPercentData['one'])
        this.reporterPersonalPercentData[2].push(...this.reporterPersonalPercentData['two'])
        this.reporterPersonalPercentData[3].push(...this.reporterPersonalPercentData['three'])
        this.reporterPersonalPercentData[4].push(...this.reporterPersonalPercentData['four'])
        this.reporterPersonalPercentData[5].push(...this.reporterPersonalPercentData['five'])
        console.log(12345678, this.reporterPersonalPercentData[2])
      },
      // async exportQuery() {
      //   const res = await exportReporterPersonalPercent({
      //     startDate: this.startDate,
      //     endDate: this.endDate,
      //   })
      //   // 创建一个新的工作簿
      //   this.downLoadFile(res, '个人任务完成率报表.xlsx', () => {})
      // },
      // downLoadFile(fileData, fileName, callBack) {
      //   // 创建Blob实例  fileData 接受的是一个Blob
      //   let blob = new Blob([fileData], {
      //     type: 'applicationnd.ms-excel',
      //   })
      //   if (!!window.ActiveXObject || 'ActiveXObject' in window) {
      //     window.navigator.msSaveOrOpenBlob(blob, fileName)
      //   } else {
      //     // 创建a标签
      //     const link = document.createElement('a')
      //     // 隐藏a标签
      //     link.style.display = 'none'
      //     // 在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 指定源 object的内容
      //     // 或者说(link.href 得到的是一个地址，你可以在浏览器打开。指向的是文件资源)
      //     link.href = URL.createObjectURL(blob)
      //     console.log('link.href指向的是文件资源', link.href)
      //     //设置下载为excel的名称
      //     link.setAttribute('download', fileName)
      //     document.body.appendChild(link)
      //     // 模拟点击事件
      //     link.click()
      //     // 移除a标签
      //     document.body.removeChild(link)
      //     // 回调函数，表示下载成功
      //     callBack(true)
      //   }
      // },
      groupBy(array, key) {
        return array.reduce((result, currentItem) => {
          // 使用 key 函数提供的键或直接使用属性名
          const groupKey = typeof key === 'function' ? key(currentItem) : currentItem[key]

          // 初始化对应的数组，如果已经存在则直接使用
          if (!result[groupKey]) {
            result[groupKey] = []
          }
          result[groupKey].push(currentItem)

          return result
        }, {})
      },
      onTableExcels() {
        let dataExcels1 = this.tableAllData[1].map((obj) => delete obj.departmentId && Object.values(obj))
        let dataExcels2 = this.tableAllData[2].map((obj) => delete obj.departmentId && Object.values(obj)) // 一部
        let dataExcels3 = this.tableAllData[3].map((obj) => delete obj.departmentId && Object.values(obj)) // 二部
        let dataExcels4 = this.tableAllData[4].map((obj) => delete obj.departmentId && Object.values(obj)) // 下位机
        let dataExcels5 = this.tableAllData[5].map((obj) => delete obj.departmentId && Object.values(obj)) // 公共创新

        const workbook = new ExcelJS.Workbook()
        workbook.creator = '周工单汇总表'
        workbook.lastModifiedBy = '周工单汇总表'
        workbook.created = new Date()
        workbook.modified = new Date()
        // 将工作簿日期设置为 1904 年日期系统
        workbook.properties.date1904 = true
        const worksheet = workbook.addWorksheet('周工单汇总表')
        worksheet.properties.defaultColWidth = 16 // 默认列宽
        worksheet.properties.defaultRowHeight = 16 // 默认行高
        // worksheet.columns = [ // 设置列宽
        //   { width: 16 },
        //   { width: 10 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        // ];
        //定义周工单汇总表报表
        const Examrow = worksheet.getRow(1)
        Examrow.height = 50
        const Examcell = worksheet.getCell('A1')
        worksheet.mergeCells('A1:H1')
        Examcell.value =
          this.startDate.replace(new RegExp('-', 'g'), '.') + '-' + this.endDate.replace(new RegExp('-', 'g'), '.') + '周工单汇总表'
        Examcell.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        // Examcell.border = {
        //   top: { style: 'thin' }, // 顶部边框
        //   left: { style: 'thin' }, // 左边框
        //   bottom: { style: 'thin' }, // 底部边框
        //   right: { style: 'thin' }, // 右边框
        // }
        const Examcell1 = worksheet.getCell('A2')
        worksheet.mergeCells('A2:H2')
        Examcell1.value =
          this.startDate.replace(new RegExp('-', 'g'), '.') + '-' + this.endDate.replace(new RegExp('-', 'g'), '.') + '一部总工单统计情况'
        Examcell1.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell1.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        Examcell1.fill = {
          type: 'pattern', // 填充类型
          pattern: 'solid', // 图案
          fgColor: { argb: 'FF4ECB73' }, // 前景颜色（ARGB颜色代码）
        }
        Examcell1.border = {
          top: { style: 'thin' }, // 顶部边框
          left: { style: 'thin' }, // 左边框
          bottom: { style: 'thin' }, // 底部边框
          right: { style: 'thin' }, // 右边框
        }
        // 一部
        worksheet.addTable({
          name: 'Examcell1',
          ref: 'A3',
          displayName: '周工单汇总表',
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [
            { name: '费用号' },
            { name: '项目名称' },
            { name: '工单内容' },
            { name: '工单下达时间' },
            { name: '执行人' },
            { name: '完成情况' },
            { name: '工单等级' },
            { name: '未关闭原因' },
          ],
          rows: dataExcels1,
        })
        console.log(999, dataExcels2)
        //二部
        const Examcell2 = worksheet.getCell(`A${dataExcels1.length + 4}`)
        worksheet.mergeCells(`A${dataExcels1.length + 4}:H${dataExcels1.length + 4}`)
        Examcell2.value =
          this.startDate.replace(new RegExp('-', 'g'), '.') + '-' + this.endDate.replace(new RegExp('-', 'g'), '.') + '二部总工单统计情况'
        Examcell2.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell2.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        Examcell2.fill = {
          type: 'pattern', // 填充类型
          pattern: 'solid', // 图案
          fgColor: { argb: 'FF4ECB73' }, // 前景颜色（ARGB颜色代码）
        }
        Examcell2.border = {
          top: { style: 'thin' }, // 顶部边框
          left: { style: 'thin' }, // 左边框
          bottom: { style: 'thin' }, // 底部边框
          right: { style: 'thin' }, // 右边框
        }
        worksheet.addTable({
          name: 'Examcell2',
          displayName: '二部',
          ref: `A${dataExcels1.length + 5}`,
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [
            { name: '费用号' },
            { name: '项目名称' },
            { name: '工单内容' },
            { name: '工单下达时间' },
            { name: '执行人' },
            { name: '完成情况' },
            { name: '工单等级' },
            { name: '未关闭原因' },
          ],
          rows: dataExcels2,
        })
        //三部
        const Examcell3 = worksheet.getCell(`A${dataExcels1.length + dataExcels2.length + 6}`)
        worksheet.mergeCells(`A${dataExcels1.length + dataExcels2.length + 6}:H${dataExcels1.length + dataExcels2.length + 6}`)
        Examcell3.value =
          this.startDate.replace(new RegExp('-', 'g'), '.') + '-' + this.endDate.replace(new RegExp('-', 'g'), '.') + '三部总工单统计情况'
        Examcell3.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell3.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        Examcell3.fill = {
          type: 'pattern', // 填充类型
          pattern: 'solid', // 图案
          fgColor: { argb: 'FF4ECB73' }, // 前景颜色（ARGB颜色代码）
        }
        Examcell3.border = {
          top: { style: 'thin' }, // 顶部边框
          left: { style: 'thin' }, // 左边框
          bottom: { style: 'thin' }, // 底部边框
          right: { style: 'thin' }, // 右边框
        }
        worksheet.addTable({
          name: 'Examcell3',
          displayName: '三部',
          ref: `A${dataExcels1.length + dataExcels2.length + 7}`,
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [
            { name: '费用号' },
            { name: '项目名称' },
            { name: '工单内容' },
            { name: '工单下达时间' },
            { name: '执行人' },
            { name: '完成情况' },
            { name: '工单等级' },
            { name: '未关闭原因' },
          ],
          rows: dataExcels3,
        })
        //下位机
        const Examcell4 = worksheet.getCell(`A${dataExcels1.length + dataExcels2.length + dataExcels3.length + 8}`)
        worksheet.mergeCells(
          `A${dataExcels1.length + dataExcels2.length + dataExcels3.length + 8}:H${
            dataExcels1.length + dataExcels2.length + dataExcels3.length + 8
          }`
        )
        Examcell4.value =
          this.startDate.replace(new RegExp('-', 'g'), '.') + '-' + this.endDate.replace(new RegExp('-', 'g'), '.') + '下位机总工单统计情况'
        Examcell4.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell4.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        Examcell4.fill = {
          type: 'pattern', // 填充类型
          pattern: 'solid', // 图案
          fgColor: { argb: 'FF4ECB73' }, // 前景颜色（ARGB颜色代码）
        }
        Examcell4.border = {
          top: { style: 'thin' }, // 顶部边框
          left: { style: 'thin' }, // 左边框
          bottom: { style: 'thin' }, // 底部边框
          right: { style: 'thin' }, // 右边框
        }
        worksheet.addTable({
          name: 'Examcell4',
          displayName: '下位机',
          ref: `A${dataExcels1.length + dataExcels2.length + dataExcels3.length + 9}`,
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [
            { name: '费用号' },
            { name: '项目名称' },
            { name: '工单内容' },
            { name: '工单下达时间' },
            { name: '执行人' },
            { name: '完成情况' },
            { name: '工单等级' },
            { name: '未关闭原因' },
          ],
          rows: dataExcels4,
        })
        //公共创新
        const Examcell5 = worksheet.getCell(`A${dataExcels1.length + dataExcels2.length + dataExcels3.length + dataExcels4.length + 10}`)
        worksheet.mergeCells(
          `A${dataExcels1.length + dataExcels2.length + dataExcels3.length + dataExcels4.length + 10}:H${
            dataExcels1.length + dataExcels2.length + dataExcels3.length + dataExcels4.length + 10
          }`
        )
        Examcell5.value =
          this.startDate.replace(new RegExp('-', 'g'), '.') +
          '-' +
          this.endDate.replace(new RegExp('-', 'g'), '.') +
          '公共创新总工单统计情况'
        Examcell5.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell5.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        Examcell5.fill = {
          type: 'pattern', // 填充类型
          pattern: 'solid', // 图案
          fgColor: { argb: 'FF4ECB73' }, // 前景颜色（ARGB颜色代码）
        }
        Examcell5.border = {
          top: { style: 'thin' }, // 顶部边框
          left: { style: 'thin' }, // 左边框
          bottom: { style: 'thin' }, // 底部边框
          right: { style: 'thin' }, // 右边框
        }
        worksheet.addTable({
          name: 'Examcell5',
          displayName: '公共创新',
          ref: `A${dataExcels1.length + dataExcels2.length + dataExcels3.length + dataExcels4.length + 11}`,
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [
            { name: '费用号' },
            { name: '项目名称' },
            { name: '工单内容' },
            { name: '工单下达时间' },
            { name: '执行人' },
            { name: '完成情况' },
            { name: '工单等级' },
            { name: '未关闭原因' },
          ],
          rows: dataExcels5,
        })
        workbook.xlsx.writeBuffer().then((buffer) => {
          FileSaver.saveAs(
            new Blob([buffer], {
              type: 'application/octet-stream',
            }),
            this.startDate.replace(new RegExp('-', 'g'), '.') + '-' + this.endDate.replace(new RegExp('-', 'g'), '.') + '周工单汇总表.xlsx'
          )
        })
      },
      onExcels() {
        let dataExcels1 = this.reporterPersonalPercentData[1].map((obj) => delete obj.department_id && Object.values(obj))
        let dataExcels2 = this.reporterPersonalPercentData[2].map((obj) => delete obj.department_id && Object.values(obj)) // 一部
        let dataExcels3 = this.reporterPersonalPercentData[3].map((obj) => delete obj.department_id && Object.values(obj)) // 二部
        let dataExcels4 = this.reporterPersonalPercentData[4].map((obj) => delete obj.department_id && Object.values(obj)) // 下位机
        let dataExcels5 = this.reporterPersonalPercentData[5].map((obj) => delete obj.department_id && Object.values(obj)) // 公共创新
        let dataExcels6 = this.reporterPersonalPercentData['all'].map((obj) => delete obj.department_id && Object.values(obj)) // 合计
        console.log(1123, this.reporterPersonalPercentData[2])

        const workbook = new ExcelJS.Workbook()
        workbook.creator = '个人任务完成率报表'
        workbook.lastModifiedBy = '个人任务完成率报表'
        workbook.created = new Date()
        workbook.modified = new Date()
        // 将工作簿日期设置为 1904 年日期系统
        workbook.properties.date1904 = true
        const worksheet = workbook.addWorksheet('个人任务完成率报表')
        worksheet.properties.defaultColWidth = 16 // 默认列宽
        worksheet.properties.defaultRowHeight = 16 // 默认行高
        // worksheet.columns = [ // 设置列宽
        //   { width: 16 },
        //   { width: 10 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        // ];
        //定义个人任务完成率报表
        const Examrow = worksheet.getRow(1)
        Examrow.height = 50
        const Examcell = worksheet.getCell('A1')
        worksheet.mergeCells('A1:K1')
        Examcell.value =
          this.startDate.replace(new RegExp('-', 'g'), '.') + '-' + this.endDate.replace(new RegExp('-', 'g'), '.') + '个人任务完成率报表'
        Examcell.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        // Examcell.border = {
        //   top: { style: 'thin' }, // 顶部边框
        //   left: { style: 'thin' }, // 左边框
        //   bottom: { style: 'thin' }, // 底部边框
        //   right: { style: 'thin' }, // 右边框
        // }
        const Examcell1 = worksheet.getCell('A2')
        worksheet.mergeCells('A2:K2')
        Examcell1.value = '一部'
        Examcell1.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell1.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        Examcell1.fill = {
          type: 'pattern', // 填充类型
          pattern: 'solid', // 图案
          fgColor: { argb: 'FF4ECB73' }, // 前景颜色（ARGB颜色代码）
        }
        Examcell1.border = {
          top: { style: 'thin' }, // 顶部边框
          left: { style: 'thin' }, // 左边框
          bottom: { style: 'thin' }, // 底部边框
          right: { style: 'thin' }, // 右边框
        }
        // 一部
        worksheet.addTable({
          name: 'Examcell1',
          ref: 'A3',
          displayName: '个人任务完成率报表',
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [
            { name: '姓名' },
            { name: '遗留工单数' },
            { name: '新工单数' },
            { name: '工单总数' },
            { name: '遗留工单完成数' },
            { name: '新工单完成数' },
            { name: '总完成数' },
            { name: '本周客户需求数' },
            { name: '遗留工单完成率' },
            { name: '新工单完成率' },
            { name: '总工单完成率' },
          ],
          rows: dataExcels1,
        })
        console.log(999, dataExcels2)
        //二部
        const Examcell2 = worksheet.getCell(`A${dataExcels1.length + 4}`)
        worksheet.mergeCells(`A${dataExcels1.length + 4}:K${dataExcels1.length + 4}`)
        Examcell2.value = '二部'
        Examcell2.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell2.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        Examcell2.fill = {
          type: 'pattern', // 填充类型
          pattern: 'solid', // 图案
          fgColor: { argb: 'FF4ECB73' }, // 前景颜色（ARGB颜色代码）
        }
        Examcell2.border = {
          top: { style: 'thin' }, // 顶部边框
          left: { style: 'thin' }, // 左边框
          bottom: { style: 'thin' }, // 底部边框
          right: { style: 'thin' }, // 右边框
        }
        worksheet.addTable({
          name: 'Examcell2',
          displayName: '二部',
          ref: `A${dataExcels1.length + 5}`,
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [
            { name: '姓名' },
            { name: '遗留工单数' },
            { name: '新工单数' },
            { name: '工单总数' },
            { name: '遗留工单完成数' },
            { name: '新工单完成数' },
            { name: '总完成数' },
            { name: '本周客户需求数' },
            { name: '遗留工单完成率' },
            { name: '新工单完成率' },
            { name: '总工单完成率' },
          ],
          rows: dataExcels2,
        })
        //三部
        const Examcell3 = worksheet.getCell(`A${dataExcels1.length + dataExcels2.length + 6}`)
        worksheet.mergeCells(`A${dataExcels1.length + dataExcels2.length + 6}:K${dataExcels1.length + dataExcels2.length + 6}`)
        Examcell3.value = '三部'
        Examcell3.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell3.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        Examcell3.fill = {
          type: 'pattern', // 填充类型
          pattern: 'solid', // 图案
          fgColor: { argb: 'FF4ECB73' }, // 前景颜色（ARGB颜色代码）
        }
        Examcell3.border = {
          top: { style: 'thin' }, // 顶部边框
          left: { style: 'thin' }, // 左边框
          bottom: { style: 'thin' }, // 底部边框
          right: { style: 'thin' }, // 右边框
        }
        worksheet.addTable({
          name: 'Examcell3',
          displayName: '三部',
          ref: `A${dataExcels1.length + dataExcels2.length + 7}`,
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [
            { name: '姓名' },
            { name: '遗留工单数' },
            { name: '新工单数' },
            { name: '工单总数' },
            { name: '遗留工单完成数' },
            { name: '新工单完成数' },
            { name: '总完成数' },
            { name: '本周客户需求数' },
            { name: '遗留工单完成率' },
            { name: '新工单完成率' },
            { name: '总工单完成率' },
          ],
          rows: dataExcels3,
        })
        //下位机
        const Examcell4 = worksheet.getCell(`A${dataExcels1.length + dataExcels2.length + dataExcels3.length + 8}`)
        worksheet.mergeCells(
          `A${dataExcels1.length + dataExcels2.length + dataExcels3.length + 8}:K${
            dataExcels1.length + dataExcels2.length + dataExcels3.length + 8
          }`
        )
        Examcell4.value = '下位机'
        Examcell4.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell4.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        Examcell4.fill = {
          type: 'pattern', // 填充类型
          pattern: 'solid', // 图案
          fgColor: { argb: 'FF4ECB73' }, // 前景颜色（ARGB颜色代码）
        }
        Examcell4.border = {
          top: { style: 'thin' }, // 顶部边框
          left: { style: 'thin' }, // 左边框
          bottom: { style: 'thin' }, // 底部边框
          right: { style: 'thin' }, // 右边框
        }
        worksheet.addTable({
          name: 'Examcell4',
          displayName: '下位机',
          ref: `A${dataExcels1.length + dataExcels2.length + dataExcels3.length + 9}`,
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [
            { name: '姓名' },
            { name: '遗留工单数' },
            { name: '新工单数' },
            { name: '工单总数' },
            { name: '遗留工单完成数' },
            { name: '新工单完成数' },
            { name: '总完成数' },
            { name: '本周客户需求数' },
            { name: '遗留工单完成率' },
            { name: '新工单完成率' },
            { name: '总工单完成率' },
          ],
          rows: dataExcels4,
        })
        //公共创新
        const Examcell5 = worksheet.getCell(`A${dataExcels1.length + dataExcels2.length + dataExcels3.length + dataExcels4.length + 10}`)
        worksheet.mergeCells(
          `A${dataExcels1.length + dataExcels2.length + dataExcels3.length + dataExcels4.length + 10}:K${
            dataExcels1.length + dataExcels2.length + dataExcels3.length + dataExcels4.length + 10
          }`
        )
        Examcell5.value = '公共创新'
        Examcell5.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell5.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        Examcell5.fill = {
          type: 'pattern', // 填充类型
          pattern: 'solid', // 图案
          fgColor: { argb: 'FF4ECB73' }, // 前景颜色（ARGB颜色代码）
        }
        Examcell5.border = {
          top: { style: 'thin' }, // 顶部边框
          left: { style: 'thin' }, // 左边框
          bottom: { style: 'thin' }, // 底部边框
          right: { style: 'thin' }, // 右边框
        }
        worksheet.addTable({
          name: 'Examcell5',
          displayName: '公共创新',
          ref: `A${dataExcels1.length + dataExcels2.length + dataExcels3.length + dataExcels4.length + 11}`,
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [
            { name: '姓名' },
            { name: '遗留工单数' },
            { name: '新工单数' },
            { name: '工单总数' },
            { name: '遗留工单完成数' },
            { name: '新工单完成数' },
            { name: '总完成数' },
            { name: '本周客户需求数' },
            { name: '遗留工单完成率' },
            { name: '新工单完成率' },
            { name: '总工单完成率' },
          ],
          rows: dataExcels5,
        })
        //合计
        const Examcell6 = worksheet.getCell(
          `A${dataExcels1.length + dataExcels2.length + dataExcels3.length + dataExcels4.length + dataExcels5.length + 12}`
        )
        worksheet.mergeCells(
          `A${dataExcels1.length + dataExcels2.length + dataExcels3.length + dataExcels4.length + dataExcels5.length + 12}:K${
            dataExcels1.length + dataExcels2.length + dataExcels3.length + dataExcels4.length + dataExcels5.length + 12
          }`
        )
        Examcell6.value = '合计'
        Examcell6.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell6.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        Examcell6.fill = {
          type: 'pattern', // 填充类型
          pattern: 'solid', // 图案
          fgColor: { argb: 'FF4ECB73' }, // 前景颜色（ARGB颜色代码）
        }
        Examcell6.border = {
          top: { style: 'thin' }, // 顶部边框
          left: { style: 'thin' }, // 左边框
          bottom: { style: 'thin' }, // 底部边框
          right: { style: 'thin' }, // 右边框
        }
        worksheet.addTable({
          name: 'Examcell6',
          displayName: '合计',
          ref: `A${dataExcels1.length + dataExcels2.length + dataExcels3.length + dataExcels4.length + dataExcels5.length + 13}`,
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [
            { name: '-' },
            { name: '遗留工单数' },
            { name: '新工单数' },
            { name: '工单总数' },
            { name: '遗留工单完成数' },
            { name: '新工单完成数' },
            { name: '总完成数' },
            { name: '本周客户需求数' },
            { name: '遗留工单完成率' },
            { name: '新工单完成率' },
            { name: '总工单完成率' },
          ],
          rows: dataExcels6,
        })
        workbook.xlsx.writeBuffer().then((buffer) => {
          FileSaver.saveAs(
            new Blob([buffer], {
              type: 'application/octet-stream',
            }),
            `个人任务完成率报表.xlsx`
          )
        })
      },
      onExcelsMonth() {
        let examExcels = [] // 考试计划表格
        let spareCarExcels = [] // 备用车表格
        let heChangExcels = [] // 合场表格
        let naturalExcels = [] // 入籍表格
        const workbook = new ExcelJS.Workbook()
        workbook.creator = '使用情况'
        workbook.lastModifiedBy = '使用情况'
        workbook.created = new Date()
        workbook.modified = new Date()
        // 将工作簿日期设置为 1904 年日期系统
        workbook.properties.date1904 = true
        const worksheet = workbook.addWorksheet('使用情况')
        worksheet.properties.defaultColWidth = 16 // 默认列宽
        worksheet.properties.defaultRowHeight = 16 // 默认行高
        // worksheet.columns = [ // 设置列宽
        //   { width: 16 },
        //   { width: 10 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        //   { width: 16 },
        // ];
        //定义考试计划标题
        const Examrow = worksheet.getRow(1)
        Examrow.height = 50
        const Examcell = worksheet.getCell('A1')
        worksheet.mergeCells('A1:K1')
        Examcell.value = '个人任务完成率报表'
        Examcell.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        const Examcell2 = worksheet.getCell('A2')
        worksheet.mergeCells('A2:K2')
        Examcell2.value = '一部'
        Examcell2.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Examcell2.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        // 考试计划
        worksheet.addTable({
          name: 'examTable',
          ref: 'A3',
          displayName: '考试计划',
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [
            { name: '公司' },
            { name: '科目' },
            { name: '考试计划数' },
            { name: '计划学员数' },
            { name: '计划成绩录入数' },
            { name: '临考成绩录入数' },
          ],
          rows: examExcels,
        })
        //定义备用车标题
        const Sparecarrow = worksheet.getRow(examExcels.length + 5)
        Sparecarrow.height = 50
        const Sparecarcell = worksheet.getCell(`A${examExcels.length + 5}`)
        worksheet.mergeCells(`A${examExcels.length + 5}:C${examExcels.length + 5}`)
        Sparecarcell.value = '备用车使用情况'
        Sparecarcell.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Sparecarcell.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        // 备用车
        worksheet.addTable({
          name: 'spareCarTable',
          displayName: '备用车',
          ref: `A${examExcels.length + 6}`,
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [{ name: '公司' }, { name: '学员安排数' }, { name: '学员签到数' }],
          rows: spareCarExcels,
        })
        //定义合场在线缴纳情况标题
        const Hechangcell = worksheet.getCell(`E${examExcels.length + 5}`)
        worksheet.mergeCells(`E${examExcels.length + 5}:F${examExcels.length + 5}`)
        Hechangcell.value = '合场在线缴纳情况'
        Hechangcell.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Hechangcell.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        // 合场在线缴纳情况
        worksheet.addTable({
          name: 'heChangTable',
          displayName: '合场在线缴纳情况',
          ref: `E${examExcels.length + 6}`,
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [{ name: '公司' }, { name: '缴费数' }],
          rows: heChangExcels,
        })
        // // 入籍数据
        const Naturalcell = worksheet.getCell(`H${examExcels.length + 5}`)
        worksheet.mergeCells(`H${examExcels.length + 5}:I${examExcels.length + 5}`)
        Naturalcell.value = '入籍数据'
        Naturalcell.font = { name: '宋体', family: 4, size: 14, bold: true } // 字体
        Naturalcell.alignment = { vertical: 'middle', horizontal: 'center' } //对齐
        worksheet.addTable({
          name: 'naturalTable',
          displayName: '入籍数据',
          ref: `H${examExcels.length + 6}`,
          headerRow: true, // 在表格顶部显示标题
          filterButton: false, // 切换标题中的过滤器控件
          totalsRow: false, // 在表格底部显示总计
          style: {
            theme: 'TableStyleLight8',
          },
          columns: [{ name: '类型' }, { name: '数量' }],
          rows: naturalExcels,
        })
        workbook.xlsx.writeBuffer().then((buffer) => {
          // eslint-disable-next-line no-undef
          FileSaver.saveAs(
            new Blob([buffer], {
              type: 'application/octet-stream',
            }),
            `个人任务完成率报表.xlsx`
          )
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f7f8 !important;

    ::v-deep {
      .el-alert {
        padding: $base-padding;

        &--info.is-light {
          min-height: 82px;
          padding: $base-padding;
          margin-bottom: 15px;
          color: #909399;
          background-color: $base-color-white;
          border: 1px solid #ebeef5;
        }
      }

      .el-card__body {
        .echarts {
          width: 100%;
          height: 115px;
        }
      }
    }

    .card {
      ::v-deep {
        .el-card__body {
          .echarts {
            width: 100%;
            height: 305px;
          }
        }
      }
    }

    .bottom {
      padding-top: 20px;
      margin-top: 5px;
      color: #595959;
      text-align: left;
      border-top: 1px solid $base-border-color;
    }

    .table {
      width: 100%;
      color: #666;
      border-collapse: collapse;
      background-color: #fff;

      td {
        position: relative;
        min-height: 20px;
        padding: 9px 15px;
        font-size: 14px;
        line-height: 20px;
        border: 1px solid #e6e6e6;

        &:nth-child(odd) {
          width: 20%;
          text-align: right;
          background-color: #f7f7f7;
        }
      }
    }

    .icon-panel {
      height: 117px;
      text-align: center;
      cursor: pointer;

      svg {
        font-size: 40px;
      }

      p {
        margin-top: 10px;
      }
    }

    .bottom-btn {
      button {
        margin: 5px 10px 15px 0;
      }
    }
  }
</style>
